<template>
  <div class="execution">
    <basic-container>
      <el-alert
        style="margin: 0 5px 10px 5px;"
        title="分类配置是非常专业的事情，建议运营人员操作！"
        type="warning">
      </el-alert>
      <avue-crud ref="crud"
                 :data="tableData"
                 :permission="permissionList"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getList"
                 @tree-load="treeLoad"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" @click.stop="handleNew()"> 新 增</el-button>
        </template>

        <template slot="showStatus" slot-scope="scope">
          <el-switch v-model="scope.row.showStatus" @change="handleChangeStatus(scope.row)" :active-value="1" :inactive-value="0"></el-switch>
        </template>
        <template slot="icon" slot-scope="scope">
          <i :class="scope.row.icon" style="font-size:24px"></i>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button @click="handleAdd(scope.row, scope.index)" v-if="scope.row.level < 3" icon="el-icon-plus" :size="scope.size" :type="scope.type">添加</el-button>
          <el-button @click="handleDel(scope.row,scope.index)" v-if="!scope.row.hasChildren" icon="el-icon-delete" :size="scope.size" :type="scope.type">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {addObj, putObj, delObj, fetchCategoryTree, fetchCidTree} from '@/api/category'
import {tableOption} from '@/const/crud/category'
import {mapGetters} from 'vuex'

export default {
  name: 'category',
  data() {
    return {
      tableData: [],
      tableLoading: false,
      tableOption: tableOption,
      treeCid: [],
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.product_category_add, false),
        delBtn: this.vaildData(this.permissions.product_category_del, false),
        editBtn: this.vaildData(this.permissions.product_category_edit, false)
      };
    }
  },
  methods: {
    getList() {
      this.tableLoading = true;
      // 获取分类树
      fetchCategoryTree(true, 0).then(response => {
        this.tableData = response.data.data;
        this.tableLoading = false;
      }).then(()=>{
        // 获取节点树
        fetchCidTree(2).then(res=>{
          const cidTree = res.data.data;
          cidTree.unshift({label: '根节点', value: '0'});
          this.$refs.crud.resultOption.column[1].dicData = cidTree;
        })
      }).catch(() => {
        this.tableLoading = false;
      });
    },
    // 树结构懒加载
    treeLoad(tree, treeNode, resolve) {
      fetchCategoryTree(true, tree.catId).then(response => {
        resolve(response.data.data)
      }).catch(() => {
        resolve([])
      });
    },
    rowDel: function (row, index) {
      if(row.hasChildren) {
        this.$message.warning('该分类包含子分类，请先删除子分类再进行本操作！')
        return;
      }
      this.$confirm('是否确认删除【' + row.name + '】分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.catId)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList()
      }).catch(() => {
        loading();
      });
    },
    handleNew() {
      this.$refs.crud.resultOption.column[1].value = 0;
      this.tableOption.addTitle = '添 加 根 分 类';
      this.$refs.crud.rowAdd();
    },
    handleAdd(row, index) {
      this.$refs.crud.resultOption.column[1].value = row.catId;
      this.tableOption.addTitle = '添加【' + row.name + '】的子分类';
      this.$refs.crud.rowAdd();
    },
    handleDel(row, index) {
      this.$refs.crud.rowDel(row, index);
    },
    handleSave: function (row, done, loading) {
      addObj(row).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList()
      }).catch(() => {
        loading();
      });
    },
    refreshChange() {
      console.log("refreshChange")
      this.getList()
    },
    handleChangeStatus(row) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        this.getList()
      }).catch(() => {

      });
    }
  }
}
</script>
